---
title: Guía de Migración
---

# Guía de Migración

## Migrando RainbowKit

### Cambios significativos en la versión 2.x.x

Las dependencias `wagmi` y `viem` ahora han alcanzado la versión `2.x.x` con cambios disruptivos.

Sigue los pasos a continuación para migrar.

**1. Actualiza RainbowKit, `wagmi`, y `viem` a sus últimas versiones**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**2. Instalar la dependencia `@tanstack/react-query`**

Con Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) es ahora una dependencia necesaria.

Instálalo con el siguiente comando:

```bash
npm i @tanstack/react-query
```

**3. Actualiza tus configuraciones de RainbowKit y Wagmi**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. Verifica los cambios significativos en `wagmi` y `viem`**

Si utilizas hooks de `wagmi` y acciones de `viem` en tu dApp, necesitarás seguir las guías de migración para v2:

- [Guía de Migración a Wagmi v2](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Cambios Significativos en Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Cambios en RainbowKit

**1. Comportamiento mejorado para billeteras EIP-6963**

Las billeteras que soportan el nuevo estándar de conexión EIP-6963 (incluyendo Rainbow, MetaMask y más) ahora aparecerán automáticamente en una sección `Instalado` durante la experiencia de Conectar Billetera, asegurando que los usuarios siempre puedan encontrar sus billeteras favoritas y conectarse a las dApps sin conflictos o botones de respaldo.

Los desarrolladores continúan teniendo control total sobre la Lista de Billeteras Personalizadas para enfatizar billeteras preferidas por los usuarios finales. Se recomienda continuar incluyendo `injectedWallet` y `walletConnectWallet` en su lista para soportar todas las plataformas.

**2. Configuración de Wagmi con getDefaultConfig**

Esta nueva API simplifica la experiencia de configuración y reemplaza la necesidad de usar `createConfig` de Wagmi directamente. La configuración de cadenas se simplifica, incluyendo proveedores públicos inferidos para `transports`.

La lista de billeteras predeterminada se incluirá automáticamente, relegando la necesidad de usar `getDefaultWallets` y `connectorsForWallets`.

Puedes crear una Lista de Billeteras Personalizadas pasando conectores de billetera importados o personalizados a `wallets`. Ya no es necesario instanciar conectores de billetera y pasar `projectId` y `chains`.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

Ya no necesitas pasar `chains` a `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. Cadenas Personalizadas**

El tipo `Chain` ha cambiado de acuerdo con Wagmi v2 y continúa soportando los metadatos `iconUrl` e `iconBackground` de RainbowKit.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Ejemplo con `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

Ejemplo con `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. Billeteras Personalizadas**

Los conectores de billetera RainbowKit han sufrido cambios sustanciales para soportar Wagmi v2. Consulta los [documentos actualizados](https://www.rainbowkit.com/docs/custom-wallets) y un [conector de ejemplo](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) para actualizar cualquier conector de billetera personalizado en tu dApp.

Los conectores de billetera ahora también soportan el estándar EIP-6963 con la propiedad `rdns`. Asegúrate de que esto esté poblado para prevenir referencias duplicadas a billeteras que soportan EIP-6963 en tu lista de billeteras.

### Cambios significativos en la versión 1.x.x

#### Actualizado a wagmi v1

La dependencia `wagmi` ha sido actualizada a `1.x.x`.

Sigue los pasos a continuación para migrar.

**1. Actualiza RainbowKit y `wagmi` a su última versión**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**2. Instalar la dependencia `viem`**

wagmi v1 requiere la dependencia `viem`. Instálalo con el siguiente comando:

```bash
npm i viem
```

**3. Asegura la compatibilidad con el empaquetador y polifill**

Consulta nuestra muestra de configuración de [Next.js Webpack](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/next.config.js) para orientación en la configuración de tu proyecto.

Guías adicionales de framework para Vite y Remix están disponibles [aquí](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup).

**4. Verifica los cambios significativos en `wagmi`**

Si usas hooks de `wagmi` en tu aplicación, deberás seguir la guía de migración a v1 de `wagmi`.

[Puedes ver su guía de migración aquí](https://wagmi.sh/react/migration-guide).

### Cambios significativos en la versión 0.12.x

La dependencia `wagmi` ha sido actualizada a `0.12.x`.

RainbowKit ha adoptado el conector `WalletConnectLegacyConnector` en `wagmi` para continuar con el soporte de WalletConnect v1. El soporte para WalletConnect v2 y `WalletConnectConnector` estará disponible pronto como una versión de corrección, sin cambios significativos.

Las billeteras serán actualizadas automáticamente en futuros lanzamientos.

Cada dApp debe ahora proporcionar un `projectId` de [WalletConnect Cloud](https://cloud.walletconnect.com/) para habilitar WalletConnect v2. Esto debe completarse antes de que los servidores puente de WalletConnect v1 se cierren el 28 de junio de 2023. RainbowKit preferirá discretamente la v1 para todas las billeteras si `projectId` no está especificado.

Sigue los pasos a continuación para migrar.

#### 1. Actualiza RainbowKit y `wagmi` a su última versión

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### 2. Proporciona un projectId de WalletConnect Cloud

Cada dApp que dependa de WalletConnect ahora necesita obtener un `projectId` de [WalletConnect Cloud](https://cloud.walletconnect.com/). Esto es completamente gratis y solo lleva unos minutos.

Proporcione el `projectId` a `getDefaultWallets` y conectores de billetera individual RainbowKit de la siguiente manera:

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### Cambios significativos en la versión 0.11.x

La dependencia `wagmi` ha sido actualizada a `0.11.x`.

Sigue los pasos a continuación para migrar.

#### 1. Actualiza RainbowKit y `wagmi` a su última versión

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### 2. Verifica los cambios significativos en `wagmi`

Si usas hooks de `wagmi` en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en `wagmi`.

[Puedes ver su guía de migración aquí](https://wagmi.sh/react/migration-guide#011x-breaking-changes).

### Cambios significativos en la versión 0.10.x

La dependencia `wagmi` ha sido actualizada a `0.10.x`.

Sigue los pasos a continuación para migrar.

#### 1. Actualiza RainbowKit y `wagmi` a su última versión

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### 2. Verifica los cambios significativos en `wagmi`

Si usas hooks de `wagmi` en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en `wagmi`.

[Puedes ver su guía de migración aquí](https://wagmi.sh/react/migration-guide#010x-breaking-changes).

### Cambios significativos en la versión 0.9.x

La dependencia `wagmi` ha sido actualizada a `0.9.x`.

Sigue los pasos a continuación para migrar.

#### 1. Actualiza RainbowKit y `wagmi` a su última versión

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### 2. Verifica los cambios significativos en `wagmi`

Si usas hooks de `wagmi` en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en `wagmi`.

[Puedes ver su guía de migración aquí](https://wagmi.sh/react/migration-guide#09x-breaking-changes).

### Cambios significativos en la versión 0.8.x

La dependencia `wagmi` ha sido actualizada a `0.8.x`.

Sigue los pasos a continuación para migrar.

#### 1. Actualiza RainbowKit y `wagmi` a su última versión

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### 2. Verifica los cambios significativos en `wagmi`

Si usas hooks de `wagmi` en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en `wagmi`.

[Puedes ver su guía de migración aquí](https://wagmi.sh/react/migration-guide#08x-breaking-changes).

### Cambios significativos en la versión 0.7.x

Si estás creando una lista de billeteras personalizadas, ahora debes importar cada billetera individualmente para reducir el tamaño del paquete. Tenga en cuenta que, dado que las billeteras ya no están bajo el objeto `wallet`, todas las billeteras ahora tienen un sufijo `Wallet`.

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

Tenga en cuenta también que la capa de compatibilidad con versiones anteriores para Steakwallet ha sido eliminada. Omni debería ser utilizada en su lugar.

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### Cambios significativos en la versión 0.4.x

RainbowKit ha actualizado la dependencia `wagmi` a `0.5.x`.

Sigue los pasos a continuación para migrar.

#### 1. Actualiza las dependencias

Actualiza RainbowKit y wagmi a su última versión

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### 2. Verifica los cambios significativos en `wagmi`

Si usas hooks de `wagmi` en tu aplicación, necesitarás verificar si tu aplicación ha sido afectada por los cambios significativos en `wagmi`.

[Puedes ver su guía de migración aquí](https://wagmi.sh/react/migration-guide#05x-breaking-changes).

### Cambios significativos en la versión 0.3.x

Se eliminó el parámetro `chainId` de `createConnector` en el tipo `Wallet`.

**Tenga en cuenta que todas las billeteras incorporadas están utilizando la nueva API. La mayoría de los consumidores no se verán afectados. Este cambio solo afecta a los consumidores que han creado/consumido [billeteras personalizadas](/docs/custom-wallets).**

Si previamente derivó URLs de RPC desde `chainId` en `createConnector`, ahora puede eliminar esa lógica ya que `wagmi` ahora maneja URLs de RPC internamente cuando se usa con `configureChains`.

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### Cambios significativos en la versión 0.2.x

RainbowKit ha actualizado la dependencia `wagmi` a `^0.4`.

Sigue los pasos a continuación para migrar.

#### 1. Actualiza las dependencias

Actualiza RainbowKit y wagmi a su última versión

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### 2. Reemplace la importación de configureChains

Importar `configureChains` desde wagmi en lugar de RainbowKit:

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### 3. Migre proveedores

RainbowKit ya no exporta un API `apiProvider`. Reemplázalo con tu proveedor deseado desde wagmi.

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### Alchemy

Importar `alchemyProvider` desde `wagmi/providers/alchemy`.

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Infura

Importar `infuraProvider` desde `wagmi/providers/infura`.

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

Importar `jsonRpcProvider` desde `wagmi/providers/jsonRpc`.

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### Proveedor público

Importar `publicProvider` desde `wagmi/providers/public`.

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### 4. Renombrar el proveedor de wagmi

Renombrar `WagmiProvider` a `WagmiConfig`.

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

¡Y eso es todo! 🌈
